<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<!--[if lt IE 9]>
<script type="text/javascript" src="/static/v5//lib/html5shiv.js"></script>
<script type="text/javascript" src="/static/v5//lib/respond.min.js"></script>

<![endif]-->
<link rel="stylesheet" type="text/css" href="/static/v5//static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="/static/v5//static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="/static/v5//lib/Hui-iconfont/1.0.8/iconfont.css" />

<link rel="stylesheet" type="text/css" href="/static/v5//static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="/static/v5//static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="/static/v5//lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<!--/meta 作为公共模版分离出去-->
	<style>
		.uploadBox{
			width: 100px;
			height: 100px;
			border: 1px solid #dadada;
			position: relative;
			background-color: #ffffff;
			cursor: pointer;
			float: left;
			margin-right: 20px;
		}
		.uploadBox .pic{
			width: 100%;
			height: 100%;
		}
		.uploadBox p{
			width: 100%;
			height: 100%;
			font-size: 24px;
			line-height: 100px;
			text-align: center;
			position: absolute;
			top: 0;
			margin: 0;
		}

		.uploadBox div{
			width: 100%;
			height: 30px;
			position: absolute;
			bottom: 0;
			right: 0;
			background-color: rgba(0,0,0,.6);
			z-index: 3;
			opacity: 0;
		}
		.uploadBox div img{
			width: 20px;
			height: 20px;
			display: block;
			margin: 5px auto;
		}
		.uploadBox .pic:hover+.active{
			opacity: 1;
		}
		.active:hover{
			opacity: 1;
		}
	</style>
</head>
<body>
<div class="page-container">
	<form action="" method="post" class="form form-horizontal" id="form-article-add">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章类别：</label>
			<div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
				<select name="articlecolumn" class="select" id="cate_id">
					  <th:block  th:each="bean: ${articleCates}">
                        <option th:value="${bean.cate_id}" th:text="${bean.cate_name}" th:selected="${bean.cate_id == article.cate_id}"></option>
					  </th:block>
                </select>
				</span> </div>
		</div>

		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>标题：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" th:value="${article.arti_name}" placeholder="" id="arti_name" name="">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>发布人：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" th:value="${article.release_people}" placeholder="" id="release_people" name="">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">排序：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" th:value="${article.arti_scort}" placeholder="" id="arti_scort" name="">
			</div>
		</div>

		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否推荐：</label>
			<div class="formControls col-xs-8 col-sm-9 skin-minimal">
				<div class="radio-box">
					<input name="is_recommended" type="radio" id="sex-1"  th:checked="${article.is_recommended == 0}" th:value="0">
					<label for="sex-1">是</label>
				</div>
				<div class="radio-box">
					<input type="radio" id="sex-2" name="is_recommended" th:checked="${article.is_recommended == 1}" th:value="1">
					<label for="sex-2">否</label>
				</div>

			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否可评论：</label>
			<div class="formControls col-xs-8 col-sm-9 skin-minimal">
				<div class="radio-box">
					<input name="is_comments" type="radio"   th:checked="${article.is_comments == 0}" th:value="0">
					<label for="sex-1">是</label>
				</div>
				<div class="radio-box">
					<input type="radio"  name="is_comments"  th:checked="${article.is_comments == 1}" th:value="1">
					<label for="sex-2">否</label>
				</div>

			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">图片上传：</label>
			<input type="file" hidden  id="uploadImg" accept="image/png, image/jpeg, image/gif, image/jpg" onchange="ajaxImg(this)">
			<div class="formControls col-xs-8 col-sm-9">
				<div class="uploadBox" onclick="toUploadImg(this)">
					<img th:src="${article.arti_picture}" alt="" class="pic">
					<div class="active"><img src="/static/v5/img/Trash.png" alt="" onclick="deleteImg(this)"></div>
					<p style="display: none">+</p>
				</div>


			</div>
		</div>
		<!--<div class="row cl">-->
			<!--<label class="form-label col-xs-4 col-sm-2">简介：</label>-->
			<!--<div class="formControls col-xs-8 col-sm-9">-->
				<!--<textarea name="" cols="" rows="" class="textarea"   datatype="*10-100" dragonfly="true" id="arti_profile" th:text="${article.arti_profile}"></textarea>-->

			<!--</div>-->
		<!--</div>-->
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">详细内容：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<div id="editor">

				</div>
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
				<button  class="btn btn-primary radius" type="button" id="btn1" ><i class="Hui-iconfont">&#xe632;</i>保存</button>

			</div>
		</div>
	</form>
</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/static/v5//lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/static/v5//lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/static/v5//static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/static/v5//static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script type="text/javascript" src="/static/v5//js/wangEditor.min.js"></script>
<script type="text/javascript" th:inline="javascript">
    var token = [[${token}]];
    var id  = [[${article.id}]];
    var arti_content  = [[${article.arti_content}]];
    var E = window.wangEditor
    var editor = new E('#editor')
    // 关闭粘贴内容中的样式
    editor.customConfig.pasteFilterStyle = false
    // 忽略粘贴内容中的图片
    editor.customConfig.pasteIgnoreImg = true
    // 使用 base64 保存图片
    //editor.customConfig.uploadImgShowBase64 = true

    // 上传图片到服务器
    editor.customConfig.uploadFileName = 'frontFile'; //设置文件上传的参数名称
    editor.customConfig.uploadImgServer = '/v5/admin/article/fileImg'; //设置上传文件的服务器路径
    editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
    //自定义上传图片事件
    editor.customConfig.uploadImgHooks = {
        before : function(xhr, editor, files) {

        },
        success : function(xhr, editor, result) {
            console.log("上传成功");
        },
        fail : function(xhr, editor, result) {
            console.log("上传失败,原因是"+result);
        },
        error : function(xhr, editor) {
            console.log("上传出错");
        },
        timeout : function(xhr, editor) {
            console.log("上传超时");
        }
    }

    editor.create()
    editor.txt.html(arti_content)
    $("#btn1").click(function(){


        var data = "token=" + token + "&arti_content=" + encodeURIComponent(editor.txt.html())  +  "&arti_name=" + $("#arti_name").val()
            +  "&arti_scort=" + $("#arti_scort").val() +  "&id=" + id +  "&cate_id=" + $("#cate_id").val()
        +  "&release_people=" + $("#release_people").val()  +  "&arti_picture=" +getAlluploadImg()
            +  "&is_comments=" + $("input[name='is_comments']:checked").val()    +  "&is_recommended=" + $("input[name='is_recommended']:checked").val()
        $.ajax({
            type:'post',
            url:'/v5/admin/article/update',
            dataType : 'json',
            data: data,
            success:function(data){
                if (data.mark=="0") {
                    alert(data.tip);
                } else {
                    alert(data.tip);
                }
            },
            error: function(textStatus) {
                alert(textStatus);
            }

        });
    });
</script>
<script>
    var dom
    var box
    var p
    function toUploadImg(ele){
        dom = ele.children[0]
        box = ele.children[1]
        p = ele.children[2]
        if(dom.getAttribute('src') !== ''){
            console.log('不为空')
            return false
        }
        document.getElementById('uploadImg').click()
    }
    function ajaxImg(ele) {
        var file=ele.files[0];
        var formData = new FormData();
        formData.append("frontFile", file);
        $.ajax({
            url: "/v5/admin/article/img",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
                console.log(data);
                if (data.mark=="0") {
                    dom.src = data.tip;  //  '' 替换问ajax返回图片路径
                    box.classList.add("active");
                    p.style.display = 'none'
                } else {
                    alert(data.tip);
                }


            },
            error: function (data) {
                console.log(data);
            }
        });
    }
    function deleteImg(ele){
        var event = window.event || arguments.callee.caller.arguments[0]
        event.stopPropagation()
        var imgNode = ele.parentNode.parentNode.children[0]
        var p = ele.parentNode.parentNode.children[2]
        var div = ele.parentNode
        imgNode.setAttribute('src','')
        div.classList.remove("active");
        p.style.display = 'block'
    }
    function getAlluploadImg() {
        var imgSting = ''
        var nodeList = document.querySelectorAll('.pic')
        for(var i=0;i<nodeList.length;i++){
            var imgSrc = nodeList[i].getAttribute('src')
            if(!imgSrc==''){
                imgSting+= ',' + nodeList[i].getAttribute('src')
            }
        }
        return imgSting.substr(1,imgSting.length-1);
    }


</script>
</body>
</html>